<template>
	<view>
		<view class="list-two" v-if="list.length > 0">
			<view class="list-two-item" v-for="(item,index) in list" :key="index" @click="routeGo(item)">
				<image class="image" :src="item.malloption.option1.cateinfo[0].icon_url" mode="aspectFill"></image>
				<text class="list-two-title u-line-5">{{item.mall.name}}</text>
				<text class="tips">{{item.mall.catname}}</text>
				<!-- <text class="cancel" @click.stop="cancelCol(item)">取消收藏</text> -->
			</view>
		</view>
		<view class="nocenter" v-else>
			暂无收藏~
			<!-- 请先收藏一些实体店、主播或者子品牌吧 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				page_count: 1
			}
		},
		onLoad() {
			this.loadList()
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.loadList()
			}
		},
		methods: {
			loadList() {
				this.$request({
					url: this.$api.entity.subsclist,
					data: {
						page: this.page
					}
				}).then(res => {
					this.list = this.page == 1 ? res.data.list : this.list.concat(res.data.list)
					this.list.forEach(item => {
						if (item.mall.catid == 0) {
							item.mall.catname = '平台店'
						} else if (item.mall.catid == 1) {
							item.mall.catname = '实体店'
						} else if (item.mall.catid == 2) {
							item.mall.catname = '主播'
						} else if (item.mall.catid == 3) {
							item.mall.catname = '子品牌店'
						} else if (item.mall.catid == 4) {
							item.mall.catname = '平台子店'
						} else if (item.mall.catid == 5) {
							item.mall.catname = '其他'
						}
					})
					this.page_count = res.data.pagination.page_count
				})
			},
			routeGo(item) {
				uni.navigateTo({
					url: '/pages/entity/index?mall_id=' + item.mall_id
				})
			},
			cancelCol(item) {
				let fodata = {
					mch_id: 0,
					mall_id: item.mall.id,
				}
				this.$request({
					url: this.$api.entity.subscribe,
					data: {
						formdata: JSON.stringify(fodata),
						type: 0
					},
					method: 'post'
				}).then(res => {
					if (res.data.result) {
						this.list = this.list.filter(res => {
							return res.id != item.id
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nocenter {
		width: 100%;
		text-align: center;
		line-height: 240rpx;
		font-size: 28rpx;
	}

	.list-two {
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 24rpx auto;
			width: 720rpx;
			height: 240rpx;
			font-size: 28rpx;
			background-color: #FFFFFF;
			position: relative;

			.tips {
				position: absolute;
				top: 5rpx;
				right: 12rpx;
				font-size: 20rpx;
				color: #353535;
			}

			.cancel {
				position: absolute;
				bottom: 5rpx;
				right: 2rpx;
				font-size: 24rpx;
				color: #9a5e3b;
				padding: 4rpx 12rpx;
				border: 1rpx solid #9a5e3b;
			}

			// &+.list-two-item {
			// 	margin-top: 24rpx;
			// }

			.image {
				background-color: #89DB96;
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				flex: 1;
				margin-left: 36rpx;
				text-align: justify;
			}
		}
	}
</style>
